/*
 * @Description: 创建角色弹窗
 * @Author: Rfan
 * @Date: 2022-04-05 19:08:49
 * @LastEditTime: 2022-05-25 08:59:15
 */

import { Button, Form, Input, Modal, Radio, Space, Typography } from 'antd';
import classNames from 'classnames/bind';
import { useRoleContext } from '../../contexts/RoleContext';

import styles from '../../styles/addRoleDialog.module.scss';

const cx = classNames.bind(styles);

const AddRoleDialog = () => {
  const { adminRoleTypeList, addRoleDialog, hideAddDialog, addRoleFunc } = useRoleContext();
  const [form] = Form.useForm();

  // 提交表单
  const submitFunc = () => {
    form.submit();
  };

  // 新增部门
  const onFinish = (values: any) => {
    console.log('add', values);
    addRoleFunc(values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const onCancel = () => {
    hideAddDialog();
  };

  return (
    <Modal
      destroyOnClose
      title="创建角色"
      visible={addRoleDialog.visible}
      width={600}
      footer={[
        <Button key="back" onClick={onCancel}>
          {' '}
          取消{' '}
        </Button>,
        <Button key="submit" type="primary" onClick={submitFunc}>
          创建角色
        </Button>
      ]}
      onCancel={onCancel}
    >
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        preserve={false}
        colon={false}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          name="roleName"
          label="角色名称"
          extra="角色名称是唯一标识，不能重复，10个中文以内"
          rules={[{ required: true }]}
        >
          <Input placeholder="请填写角色名称" />
        </Form.Item>
        <Form.Item name="roleType" label="角色类型" rules={[{ required: true }]}>
          <Radio.Group className={cx('role-type__group')}>
            <Space direction="vertical">
              {adminRoleTypeList.map((item: any) => (
                <div key={item.id} className={cx('role-type__item')}>
                  <Radio value={item.id}>{item.name}</Radio>
                  <Typography.Text type="secondary">（{item.desc}）</Typography.Text>
                </div>
              ))}
            </Space>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddRoleDialog;
